import React, { Component, useState } from 'react';
import PubSub from 'pubsub-js'
import { meshLog, SPRemove, SPGet, SPSet } from '../../../../config';
import { Divider, DatePicker, Popconfirm, message } from 'antd';
import { DeleteOutlined } from '@ant-design/icons'
import './socialize3.less'
import { getMessageInfo, delete_reply_message } from '../../../../api/index';
import { formatDateSlashes } from "../../../../utils/dataUtils";
import { getdataById } from "../../../../utils/socialize1";
import { saveStateById, deleteDataById } from "../../../../utils/socialize2";
const { RangePicker } = DatePicker;
export default class socialize1 extends Component {
  constructor(a) {
    super(a);
    this.state = {
      currentItems: [],//当前页码的数据
      currentPage: 1,//当前的页码
      totalPages: 0,//所有的页码总数
      itemsPerPage: 15,//每页展示多少数据
      like: [],
      reply: [],
      movetime: ''
    }
  }
  componentWillUnmount() {

  }
  async componentDidMount() {

    //获取数据
    let line = ''
    let page = 1
    let items = 15
    let result = await getMessageInfo(page, items)
    let itemsdata = result.msg.messageInfo
    meshLog('result', itemsdata);
    // 计算总页数
    let itemsPerPage = this.state.itemsPerPage
    meshLog('每页的数量', itemsPerPage);
    const totalPages = Math.ceil(result.msg.count / itemsPerPage);
    meshLog('总的页数', itemsdata);
    let currentPage = page //默认显示第一个页码的数据
    const currentItems = itemsdata;
    this.setState({
      currentPage: currentPage,
      totalPages: totalPages,
      itemsdata: itemsdata,
      currentItems: currentItems,
      like: result.msg.like,
      reply: result.msg.reply
    })


    //this.goToPage(currentPage);
  }
  goToPage = async (page) => {
    meshLog('当前展示的page', page);
    let line = ''
    let items = 15
    let result = await getMessageInfo(line, page, items)
    let itemsdata = result.msg.messageInfo
    // 计算总页数
    let itemsPerPage = this.state.itemsPerPage
    meshLog('itemsPerPage', itemsPerPage);
    const totalPages = Math.ceil(result.msg.count / itemsPerPage);
    meshLog('totalPages', itemsdata);
    let currentPage = page //默认显示第一个页码的数据
    const currentItems = itemsdata;
    this.setState({
      currentPage: currentPage,
      totalPages: totalPages,
      itemsdata: itemsdata,
      currentItems: currentItems,
      like: result.msg.like,
      reply: result.msg.reply
    })
  };

  // 首页
  gotoFirstPage = () => {
    if (this.state.currentPage <= 1) {
      return
    } else {
      let currentPage = 1
      this.setState({
        currentPage: 1,
      })
      this.goToPage(1);
    }

  };
  // 上一页
  goToPreviousPage = () => {
    if (this.state.currentPage <= 1) {
      return
    } else {
      let currentPage = this.state.currentPage
      this.setState({
        currentPage: currentPage - 1,
      })
      this.goToPage(currentPage - 1);
    }

  };
  // 下一页
  goToNextPage = () => {
    if (this.state.currentPage >= this.state.totalPages) {
      return
    } else {
      let currentPage = this.state.currentPage
      this.setState({
        currentPage: currentPage + 1,
      })
      this.goToPage(currentPage + 1);
    }
  };

  // 末页
  goToEndPage = () => {
    if (this.state.currentPage >= this.state.totalPages) {
      return
    } else {
      let currentPage = this.state.totalPages
      this.setState({
        currentPage: currentPage,
      })
      this.goToPage(currentPage);
    }
  };
  // 选择页确定
  changeTOPage = () => {
    var inputElement = document.getElementById('inputid');
    let inputValue = inputElement.value;
    let currentPage = 0
    meshLog('inputValue', inputValue);
    if (inputValue >= this.state.totalPages) {
      inputElement.value = this.state.totalPages
      currentPage = this.state.totalPages
    } else {
      currentPage = parseInt(inputValue)//强制转换成数字类型
    }
    this.setState({
      currentPage: currentPage,
    })
    this.goToPage(currentPage);
  };
  //查询按钮
  handleFruitChange = () => {
    var selectBox = document.getElementById("fruit1");
    meshLog('selectBox2', this.state.movetime);
    meshLog('selectBox', selectBox.value);

  };
  onChange = (info) => {
    console.log('RangePicker:', info);
    this.setState({
      movetime: info,
    })
  };
  //删除按钮
  Deletelined = async (element) => {
    console.log('elementelement:', element);
    let currentItemdate = this.state.currentItems;
    let status = 0
    let msgID = element.id
    let msg = ""
    let result = await delete_reply_message(status, msgID, msg)
    // meshLog('result', result);
    if (result.code == 0) {
      let updatedate = deleteDataById(currentItemdate, msgID)
      meshLog('updatedate', updatedate);
      this.setState({
        currentItems: updatedate,
      })
    } else {
      message.warning('没有修改成功', 1)
    }

  };
  //置顶按钮
  changeState = async (element) => {
    console.log('elementelement:', element);
    let currentItemdate = this.state.currentItems;
    //meshLog('currentItemdate', currentItemdate);
    let status = 1
    let msgID = element.id
    let msg = ""
    let result = await delete_reply_message(status, msgID, msg)
    // meshLog('result', result);
    if (result.code == 0) {
      let updatedate = saveStateById(currentItemdate, msgID)
      meshLog('updatedate', updatedate);
      this.setState({
        currentItems: updatedate,
      })
    } else {
      message.warning('没有修改成功', 1)
    }

  };
  render() {
    return (
      <div className="soc3" >
        <div className="soc3daohang">
          <span className='soc3daohangzuo' >位置： 社交平台 》审核管理</span>
        </div>
        <div className="soc3neirong">
          <div className="soc3neirong1" >
            <div className="soc3query" >
              <div className="soc3querytitle" >条件查询</div>
              <Divider />
              <div className="soc3querydate" >

                <label className="soc3fruit1" for="fruit1">用户</label>
                <input id="fruit1" style={{ width: 150 }} />

                <label className="soc3fruit2" for="fruit2">选择时间</label>

                <RangePicker id='fruit2' placeholder={['开始时间', '结束时间']} onChange={(_d, info) => { this.onChange(info) }} />

                <button className="handleFruit" onClick={() => { this.handleFruitChange() }}>
                  查询
                </button>

              </div>

            </div>
            <div className="soc3message"  >
              <div className="soc3messagetitle" >内容列表</div>
              <div className="soc3messagedate" >
                <div className="soc3titledate">
                  <div className="span1">序号</div>
                  <div className="span1">作者</div>
                  <div className="span11">发布内容</div>
                  <div className="span1">发布时间</div>
                  <div className="span1">置顶状态</div>
                  <div className="span1">编辑</div>
                </div>
                {
                  this.state.currentItems && this.state.currentItems.map((element, key) => {
                    if (!element.children) {
                      return (
                        <div className="soc3datashuju" style={{ backgroundColor: key % 2 == 0 ? '' : '#F1F5FB' }} key={key}>
                          <div className="span2" >{key + 1}</div>
                          <div className="span2" >{element.nickname}</div>
                          <div className="span22">{element.info.slice(0, 15)}</div>
                          <div className="span2">{formatDateSlashes(element.time)}{ }</div>
                          <div className="span2">
                            <Popconfirm
                              title="确定修改当前数据的置顶状态"
                              description="确定修改当前数据的置顶状态?"
                              onConfirm={() => { this.changeState(element) }}
                              // onCancel={cancel}
                              okText="确定"
                              cancelText="取消">
                              {element.state == 2 ? "是" : '否'}
                            </Popconfirm>
                          </div>
                          <div className="span2">
                            <Popconfirm
                              title="确定删除这条记录吗"
                              description="确定删除这条记录吗?"
                              onConfirm={() => { this.Deletelined(element) }}
                              // onCancel={cancel}
                              okText="确定"
                              cancelText="取消">
                              <DeleteOutlined />
                            </Popconfirm> </div>
                        </div>
                      )
                    }
                    else {
                      return (
                        <span>{element}</span>
                      )
                    }
                  })
                }
              </div>
              <div className='zongyeshu'>
                <span style={{ marginLeft: 40 }}>共{this.state.totalPages}页</span>
                <label className="PerPage" for="PerPage">每页显示</label>
                <select id="PerPage" style={{ color: "#000000" }} name="PerPage">
                  <option value="10">15</option>
                  <option value="8">10</option>
                  <option value="5">5</option>
                </select>个
              </div>
              <div className='current'>
                <button disabled={this.state.currentPage === 1} onClick={() => { this.gotoFirstPage() }}>
                  首页
                </button>
                <button disabled={this.state.currentPage === 1} onClick={() => { this.goToPreviousPage() }}>
                  上一页
                </button>
                {Array.from({ length: this.state.totalPages }, (_, i) => (
                  <button
                    key={i}
                    onClick={() => { this.goToPage(i + 1) }}
                    style={{ margin: '2px' }}
                    disabled={this.state.currentPage === i + 1}
                  >
                    {i + 1}
                  </button>
                ))}
                <button disabled={this.state.currentPage === this.state.totalPages} onClick={() => { this.goToNextPage() }}>
                  下一页
                </button>
                <button disabled={this.state.currentPage === this.state.totalPages} onClick={() => { this.goToEndPage() }}>
                  末页
                </button>
                <span>&nbsp;&nbsp;共{this.state.totalPages}页&nbsp;&nbsp;</span>
                到 <input id='inputid' style={{ width: 30 }} type='number' min={1} ></input>页&nbsp;&nbsp;
                <button disabled={this.state.currentPage === this.state.totalPages} onClick={() => { this.changeTOPage() }}>
                  确定
                </button>
              </div>
            </div>
          </div>
          <div className="soc3running">
            <h1 style={{ marginTop: 20 }} >有作者正在发布，请前往审核...</h1>
          </div>
        </div>
      </div >
    )
  }
}
